import React, { Component } from 'react'
import { withRouter } from "react-router-dom"
import styles from "./searchInput.module.scss"
class SearchInput extends Component {
    handleClick = () => {
        // console.log(this.props);
        this.props.history.push('searchCenter');
    }

    render() {
        return (
            <div className={styles.searchBox}>
                {/* 1、 */}
                {/* <div className={styles.searchInput} onClick={this.handleClick}>
                    <span className={styles.searchTitle}>搜索</span>
                </div> */}
                {/* 2、 */}
                <div className={styles.searchInput} onClick={()=>{
                    this.props.history.push('/searchCenter');
                }}>
                    <span className={styles.searchTitle}>搜索</span>
                </div>
            </div>
        )
    }
}
export default withRouter(SearchInput)

/*
  作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上

  默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，
执行this.props.history.push('/detail')跳转到对应路由的页面
  然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，
使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props
*/